<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.11.1.min.js?v=1" type="text/javascript"></script>
    <style>
        *{padding:0;margin:0;}
        .wrap{position:relative;width: 100%;height: 1080px;max-width: 1920px;max-height: 1000px;margin:0 auto;overflow:hidden;background: #000;}
        .box{position:absolute;width: 1920px;height:1080px;top:0;left:50%;margin-left: -960px;z-index: 3;display: none;}
        .nav{position:absolute;left:0;top:200px;z-index: 50;width: 100px;}
        .nav a{color:#fff;display: block;width: 100px;margin-top:10px;text-align: center;}
        canvas{width: 1920px;height: 1080px;position:absolute;top:0;left:50%;margin-left: -960px;}
    </style>
</head>
<body>
<div class="nav">
    <a href="javascript:f(1);">图片1</a>
    <a href="javascript:f(2);">图片2</a>
    <a href="javascript:f(3);">图片3</a>
    <a href="javascript:f(4);">图片4</a>
</div>
<div class="wrap">
    <div class="box box1">
        <img src="images/bg2.jpg" id="dolly1" />
    </div>
    <div class="box box2">
        <img src="images/bg3.jpg" id="dolly2" />
    </div>
    <div class="box box3">
        <img src="images/bg4.jpg" id="dolly3" />
    </div>
    <div class="box box4">
        <img src="images/bg5.jpg" id="dolly4" />
    </div>


</div>

<script src="js/close-pixelate.js" type="text/javascript"></script>
<script type="text/javascript">
    var p=40;
    var pixelOpts = [{resolution: p}];
    var time;
    var pixelDolly1,pixelDolly2,pixelDolly3,pixelDolly4;
    window.onload=function(){
        f(1);
    }
    function f(num){
        switch (num){
            case 1:
                var dolly1 = document.getElementById('dolly1');
                pixelDolly1=dolly1.closePixelate(pixelOpts);
                $(".box").hide();
                $(".box1").show();
                time=setInterval(function(){
                    p=p-2;
                    pixelOpts= [{resolution: p}];
                    pixelDolly1.render(pixelOpts);
                },40);
                setTimeout(function(){
                    clearInterval(time);
                    p=40;
                    $(".box1").html('<img src="images/bg2.jpg" id="dolly1"/>');
                },760);
                break;
            case 2:
                var dolly2 = document.getElementById('dolly2');
                pixelDolly2=dolly2.closePixelate(pixelOpts);
                $(".box").hide();
                $(".box2").show();
                time=setInterval(function(){
                    p=p-2;
                    pixelOpts= [{resolution: p}];
                    pixelDolly2.render(pixelOpts);
                },40);
                setTimeout(function(){
                    clearInterval(time);
                    p=40;
                    $(".box2").html('<img src="images/bg3.jpg" id="dolly2" />');
                },760);
                break;
            case 3:
                var dolly3 = document.getElementById('dolly3');
                pixelDolly3=dolly3.closePixelate(pixelOpts);
                $(".box").hide();
                $(".box3").show();
                time=setInterval(function(){
                    p=p-2;
                    pixelOpts= [{resolution: p}];
                    pixelDolly3.render(pixelOpts);
                },40);
                setTimeout(function(){
                    clearInterval(time);
                    p=40;
                    $(".box3").html('<img src="images/bg4.jpg" id="dolly3" />');
                },760);
                break;
            case 4:
                var dolly4 = document.getElementById('dolly4');
                pixelDolly4=dolly4.closePixelate(pixelOpts);
                $(".box").hide();
                $(".box4").show();
                time=setInterval(function(){
                    p=p-2;
                    pixelOpts= [{resolution: p}];
                    pixelDolly4.render(pixelOpts);
                },40);
                setTimeout(function(){
                    clearInterval(time);
                    p=40;
                    $(".box4").html('<img src="images/bg5.jpg" id="dolly4" />');
                },760);
                break;
        }
    }



</script>
</body>
</html>